<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lcy">
    <script src="../jquery-3.1.1.js"></script>
    <title></title>
    <style>
        div{
            width: 600px;
            margin: 0 auto;
            background-color: lightgrey;
            color: white;
            height: 60px;
            line-height: 60px;
            font-weight: bold;
            display: flex;
            justify-content: space-around;
        }
        section{
            width: 600px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
            border: 1px solid lightgrey;
            /*display: none;*/
        }
        ul li{
            padding: 20px;
        }
        .on{
            text-decoration: underline;
            color: orange;
        }
        .bl{
            visibility: hidden;
        }
        li:hover{
            text-decoration: underline;
            /*color: lightgray;*/
        }
    </style>
</head>
<body>
    <div>
        <span>公司简介</span>
        <span>产品介绍</span>
        <span>联系我们</span>
        <span>人才招聘</span>
    </div>
    <section>
        <ul class="bl">
            <li>概述介绍</li>
            <li>发展历史</li>
            <li>元素属性</li>
        </ul>
        <ul class="bl">
            <li>概述介绍</li>
            <li>发展历史</li>
            <li>元素属性</li>
        </ul>
        <ul class="bl">
            <li>概述介绍</li>
            <li>发展历史</li>
            <li>元素属性</li>
        </ul>
        <ul class="bl">
            <li>概述介绍</li>
            <li>发展历史</li>
            <li>元素属性</li>
        </ul>
    </section>
</body>
</html>
<script>
    $('span').each(function(index){
        $(this).mouseover(function(){
            $(this).addClass('on').siblings().removeClass('on');
            $('section>ul').eq(index).removeClass('bl').siblings().addClass('bl');
            console.log(index);
        })
    })
    $('ul').each(function(index){
        $(this).mouseleave(function(){
            $(this).addClass('bl');
            $('span').eq(index).removeClass('on');
        })
        $(this).mouseover(function(){
            $('span').eq(index).removeClass('on');
        })
    })
</script>